Created:06/02/2020
By: DynamicLayers
Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please contact our support. Thanks so much!
Below is the general HTML structure of the landing page.
The template page's layout consist of top that show the logo and main menu, hero section that show background image, beforecontent that show some amaizing content, about section contain about your some info & feature, service section contained all services, work section you can showcase your portfolio with awesome animation, skills section here you can add some skills, team section is for your team members, testimonial section here you can published your customer reviews, call to action this for call to action content, contact section here you can put your contact information & footer that show copyright information.
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Multipurpose Saas Startup HTML Template">
<meta name="author" content="DynamicLayers">
<title>Saasbiz | Multipurpose Saas Startup HTML Template</title>
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.png">
<!-- Font Awesome CSS -->
<link rel="stylesheet" href="css/fontawesome.min.css">
<!-- Themify Icons CSS -->
<link rel="stylesheet" href="css/themify-icons.css">
<!-- Elegant Line Icons CSS -->
<link rel="stylesheet" href="css/elegant-line-icons.css">
<!-- Elegant Icons CSS -->
<link rel="stylesheet" href="css/elegant-font-icons.css">
<!-- Saasbiz Icons CSS -->
<link rel="stylesheet" href="css/saasbiz-icons.css">
<!-- Animate CSS -->
<link rel="stylesheet" href="css/animate.min.css">
<!-- Nice Select CSS -->
<link rel="stylesheet" href="css/nice-select.css">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Slicknav CSS -->
<link rel="stylesheet" href="css/slicknav.min.css">
<!-- Pricing CSS -->
<link rel="stylesheet" href="css/pricing-table.css">
<!-- Odometer CSS -->
<link rel="stylesheet" href="css/odometer.min.css">
<!-- Venobox CSS -->
<link rel="stylesheet" href="css/venobox/venobox.css">
<!-- OWL-Carousel CSS -->
<link rel="stylesheet" href="css/owl.carousel.css">
<!-- Main CSS -->
<link rel="stylesheet" href="css/main.css">
<!-- Responsive CSS -->
<link rel="stylesheet" href="css/responsive.css">
<script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
</head>
<body data-spy="scroll" data-target="#navmenu" data-offset="70">
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div class="site-preloader-wrap">
<div class="spinner"></div>
</div><!-- Preloader -->
<header id="header" class="header-section">
<div class="container">
<nav class="navbar ">
</nav>
</div>
</header> <!--.header-section -->
<div class="header-height"></div>
<section class="hero-section bg-grey d-flex align-items-center bd-bottom">
<div class="bubble-effect">
<div class="bubble b-1"></div>
<div class="bubble b-2"></div>
<div class="bubble b-3"></div>
<div class="bubble b-4"></div>
<div class="bubble b-5"></div>
<div class="bubble b-6"></div>
</div>
<div class="container">
</div>
</section><!--/.hero-section-->
<section class="promo-section bd-bottom padding">
<div class="container">
</div>
</section><!--/.promo-section-->
<section class="content-section bg-grey bd-bottom padding">
<div class="container">
</div>
</section><!--/.content-section-->
<section class="content-section bd-bottom padding">
<div class="container">
</div>
</section><!--/.content-section-->
<section class="web-search-section bg-dark padding">
<div class="left-design"></div>
<div class="right-design"></div>
<div class="container">
</div>
<div class="cloud"></div>
</section><!--/.web-search-section-->
<section class="project-section bd-bottom padding">
<div class="container">
</div>
</section><!--/.project-section-->
<section class="testimonial-section bg-grey bd-bottom padding">
<div class="left-design"></div>
<div class="right-design"></div>
<div class="container">
</div>
</section><!--/.testimonial-section-->
<section class="cta-section bg-dark padding">
<div class="cta-shape-1"></div>
<div class="cta-shape-2"></div>
<div class="cta-shape-3"></div>
<div class="container">
</div>
</section><!--/.cta-section-->
<div class="sponsor-section padding">
<div class="container">
</div>
</div><!--/. sponsor-section -->
<section class="widget-section bg-dark padding">
<div class="left-design"></div>
<div class="right-design"></div>
<div class="container">
</div>
</section><!--/.widget-section-->
<footer class="footer-section bg-dark align-center">
<div class="container">
</div>
</footer><!-- /.footer-section -->
<a data-scroll href="#header" id="scroll-to-top"><i class="arrow_carrot-up"></i></a>
<!-- jQuery Lib -->
<script src="js/vendor/jquery-1.12.4.min.js"></script>
<!-- Bootstrap JS -->
<script src="js/vendor/bootstrap.min.js"></script>
<!-- Tether JS -->
<script src="js/vendor/tether.min.js"></script>
<!-- Slicknav JS -->
<script src="js/vendor/jquery.slicknav.min.js"></script>
<!-- OWL-Carousel JS -->
<script src="js/vendor/owl.carousel.min.js"></script>
<!-- Smooth Scroll JS -->
<script src="js/vendor/smooth-scroll.min.js"></script>
<!-- Venobox JS -->
<script src="js/vendor/venobox.min.js"></script>
<!-- Ajaxchimp JS -->
<script src="js/vendor/jquery.ajaxchimp.min.js"></script>
<!--YTPlayer Js-->
<script src="js/vendor/jquery.mb.YTPlayer.min.js"></script>
<!-- Nice Select JS -->
<script src="js/vendor/jquery.nice-select.min.js"></script>
<!-- Pricing Switcher JS -->
<script src="js/vendor/pricing-switcher.js"></script>
<!-- Waypoints JS -->
<script src="js/vendor/waypoints.min.js"></script>
<!-- Odometer JS -->
<script src="js/vendor/odometer.min.js"></script>
<!-- Wow JS -->
<script src="js/vendor/wow.min.js"></script>
<!-- Main JS -->
<script src="js/main.js"></script>
</body>
</html>
The site is made of many sections like header, slider, testimonials, services and more...
<header id="header" class="header-section">
<div class="container">
<nav class="navbar ">
<a href="index.html" class="navbar-brand"><img src="img/logo-dark.png" alt="Saasbiz"></a>
<div class="d-flex menu-wrap">
<div id="mainmenu" class="mainmenu">
<ul class="nav">
<li><a data-scroll class="nav-link active" href="index.html">Home<span class="sr-only">(current)</span></a>
<ul>
<li><a href="index.html">Home Design Studio</a></li>
<li><a href="index-2.html">Home Web hosting</a></li>
<li><a href="index-3.html">Home Support Desk</a></li>
<li><a href="index-4.html">Home Apps Landing</a></li>
<li><a href="index-5.html">Home Cloud Based Saas</a></li>
</ul>
</li>
<li><a href="#">About</a>
<ul>
<li><a href="about-us.html">About Us</a></li>
<li><a href="about-company.html">About Company</a></li>
</ul>
</li>
<li><a href="#">Services</a>
<ul>
<li><a href="services-1.html">Services 01</a></li>
<li><a href="services-2.html">Services 02</a></li>
</ul>
</li>
<li><a href="#">Case Studies</a>
<ul>
<li><a href="case-studies.html">Case Studies</a></li>
<li><a href="case-details.html">Case Studies Single</a></li>
</ul>
</li>
<li><a href="#">Pages</a>
<ul>
<li><a href="job-listing.html">Job Listing</a></li>
<li><a href="job-details.html">Job Details</a></li>
<li><a href="team.html">Our Team</a></li>
<li><a href="pricing-plans.html">Pricing Plans</a></li>
<li><a href="login.html">Login</a></li>
<li><a href="register.html">Register</a></li>
<li><a href="faq.html">FAQ's</a></li>
<li><a href="404.html">404 Error</a></li>
</ul>
</li>
<li><a href="#">Blog</a>
<ul>
<li><a href="blog-grid.html">Blog Grid</a></li>
<li><a href="blog-classic.html">Blog Classic</a></li>
<li><a href="blog-single.html">Blog Single</a></li>
</ul>
</li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<div class="header-right">
<div class="cart-icon"><i class="fa fa-shopping-basket"></i><span class="count">0</span></div>
</div>
</div>
</nav>
</div>
</header> <!--.header-section -->
<div class="header-height"></div>
<section class="hero-section bg-grey d-flex align-items-center bd-bottom">
<div class="bubble-effect">
<div class="bubble b-1"></div>
<div class="bubble b-2"></div>
<div class="bubble b-3"></div>
<div class="bubble b-4"></div>
<div class="bubble b-5"></div>
<div class="bubble b-6"></div>
</div>
<div class="container">
<div class="row hero-wrap d-flex align-items-center">
<div class="col-lg-6 sm-padding">
<div class="hero-content">
<h1>Drive More Customers <br>Through Digital.</h1>
<p>We provide marketing services to startups and small businesses to looking for a partner of their digital media, design & development, lead generation and communications requirents.</p>
<a href="#" class="default-btn">Get Started</a>
</div>
</div>
<div class="col-lg-6 sm-padding">
<img src="img/hero-1.png" alt="hero">
</div>
</div>
</div>
</section><!--/.hero-section-->
<section id="features" class="features-section bg-grey bd-bottom padding"> <div class="shape"></div> <div class="container"> <div class="row d-flex align-items-center"> <div class="col-lg-6 sm-padding wow fadeInLeft" data-wow-delay="200ms"> <div class="section-heading mb-40"> <h2>Revolutionize Your Online <br>Business Today!</h2> <p>The first is a non technical method which requires the use of software. Download free Saasdesk software and use advanced tools to help.</p> <a href="#" class="default-btn">Get Started Now</a> </div> </div> <div class="col-lg-6 sm-padding"> <div class="row"> <div class="col-md-6 padding-15 wow fadeInUp" data-wow-delay="200ms"> <div class="features-item"> <i class="icon-anchor"></i> <h3>Data Analytics</h3> <p>We provide marketing to businesses to looking for a partner digital media.</p> </div> </div> </div> </div> </div> </div> </section><!-- /.features-section -->
<section class="content-section bd-bottom padding"> <div class="container"> <div class="row d-flex align-items-center"> <div class="col-lg-6 sm-padding wow fadeInLeft" data-wow-delay="200ms"> <div class="content-info"> <h2>Track Productivity & Keep Your <br> Projects On The Budget!</h2> <p>The first is a non technical method which requires the use of software. Download free Saasdesk software and use advanced tools to help.</p> <a href="#" class="default-btn">Get Started Now</a> </div> </div> <div class="col-lg-6 sm-padding wow fadeInRight" data-wow-delay="300ms"> <img src="img/content-1.png" alt="img"> </div> </div> </div> </section><!-- /.content-section -->
<section id="pricing" class="pricing-section bd-bottom padding"> <div class="shape"></div> <div class="container"> <div class="section-heading text-center mb-40"> <span>Plans & Pricing</span> <h2>Pricing For Every Business</h2> </div> <div class="row"> <div class="col-lg-4 col-sm-6 padding-15 wow fadeInUp" data-wow-delay="200ms"> <div class="pricing-box"> <div class="pricing-head"> <h3>Basic</h3> <h2>$29.00 <span>Monthly</span></h2> </div> <ul class="pricing-list"> <li>1024 MB Memory</li> <li>10 Websites</li> <li>Unlimited Bandwidth</li> <li>24/7 Support</li> </ul> <div class="pricing-footer"> <a href="#" class="default-btn">Get Started</a> </div> </div> </div> </div> </div> </section><!-- /.pricing-section -->
<section id="reviews" class="testimonial-section bd-bottom padding"> <div class="bubble-effect"> <div class="bubble b-1"></div> </div> <div class="container"> <div class="section-heading text-center mb-40"> <span>Testimonial</span> <h2>What Our Customer Says!</h2> </div> <div class="testimonial-wrap"> <div class="row"> <div class="col-lg-8 offset-lg-2"> <div class="slider slider-for"> <div class="testi-content"> <p>"Thank you for guiding us through the construction process, understanding, and always ready to accommodate our needs. We love our new space and know that it was built by the very best!"</p> <div class="author-info"> <h3>José Carpio <span>Developer</span></h3> </div> </div> </div> </div> </div> <div class="row"> <div class="col-lg-6 offset-lg-3"> <div class="slider slider-nav"> <div class="testi-thumb"> <img src="img/testi-1.jpg" alt="img"> </div> </div> </div> </div> </div> </div> </section><!-- /.testimonial-section -->
Frequently Asked Questions<h2> <div>
If you could time travel, what would you do?<h3>
As of the moment, we only have PayPal as our payment method. But don’t worry, we are working on adding more payment methods for your convenience.<p> <li> <ul> <div>
If you could time travel, what would you do?<h3>
As of the moment, we only have PayPal as our payment method. But don’t worry, we are working on adding more payment methods for your convenience.<p> <li> <ul> <div> <div> <div> <section>
8) Cta Section - top
<section class="cta-section"> <div class="container"> <div class="row cta-wrap d-flex align-items-center"> <div class="cta-overlay-img"></div> <div class="col-lg-7 sm-padding"> <div class="cta-content"> <h2>10,000+ Professionals Peoples <br>Recommeding SaasDesk!</h2> </div> </div> <div class="col-lg-5 sm-padding"> <div class="cta-content text-right"> <a href="#" class="default-btn">Get Started Now</a> <a href="#" class="default-btn">Start Free Trial</a> </div> </div> </div> </div> </section><!-- /.cta-section -->
9) Widget Section - top
<section class="widget-section bd-bottom padding"> <div class="bubble-effect"> <div class="bubble b-1"></div> <div class="bubble b-3"></div> <div class="bubble b-4"></div> <div class="bubble b-5"></div> <div class="bubble b-6"></div> </div> <div class="container"> <div class="row"> <div class="col-md-4 col-sm-6 padding-15"> <div class="widget-content"> <a class="brand" href="#"><img src="img/logo-dark.png" alt="logo"></a> <p>Building your own home is about desire, fantasy. <br> But it’s achievable anyone can do it.</p> <ul class="widget-social"> <li><a href="#"><i class="fa fa-facebook"></i></a></li> </ul> </div> </div> <div class="col-md-2 col-sm-6 padding-15"> <ul class="widget-links"> <h3>Company</h3> <li><a href="#">About Us</a></li> </ul> </div> <div class="col-md-2 col-sm-6 padding-15"> <ul class="widget-links"> <h3>Product</h3> <li><a href="#">Features</a></li> </ul> </div> <div class="col-md-2 col-sm-6 padding-15"> <ul class="widget-links"> <h3>Download</h3> <li><a href="#">IOS</a></li> </ul> </div> <div class="col-md-2 col-sm-6 padding-15"> <ul class="widget-links"> <h3>Support</h3> <li><a href="#">Privacy</a></li> </ul> </div> </div> </div> </section><!-- /.widget-section -->
10) Footer Section - top
<footer class="footer-section align-center"> <div class="container"> <p>© 2020 Saasdesk Powered by DynamicLayers</p> </div> </footer><!-- / .footer-section -->
C) CSS Files and Structure - top
These are the css files:
- bootstrap.min.css
- animate.min.css
- elegant-font-icons.css
- elegant-line-icons.css
- owl.carousel.css
- main.css
- responsive.css
D) JavaScript - top
This theme use these Javascript files:
- jQuery
jQuery is a Javascript library that greatly reduces the amount of code that you must write. jQuery use these javascript files:bootstrap.min.js smooth-scroll.min.js owl.carousel.min.js jquery.ajaxchimp.min.js jquery-1.12.4.min.js jquery.mb.YTPlayer.min.js owl.carousel.min.js venobox.min.js wow.min.js jquery.counterup.min.js main.jsYou can edit the contact.js files. for setting contact form
F) Sources and Credits - top
G) PHP Code Explanation - top
There are only one php code for contact page which is contact.php, open this file and change the email and subject on line 24 and line 27. No need to edit other code unless you really want to.
Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist.
DynamicLayers